export const brand = {
    data() {
        return {
            brandData: [
                {
                    name: 'Facebook',
                    img: './imgs/facebook.svg',
                    url: 'https://www.facebook.com/'
                },
                {
                    name: 'Twitter',
                    img: './imgs/TwitterX.svg',
                    url: 'https://x.com/'
                },
                {
                    name: 'Gmail',
                    img: './imgs/gmail.png',
                    url: 'https://mail.google.com/'
                },
                {
                    name: 'LinkedIn',
                    img: './imgs/linkedin.svg',
                    url: 'https://www.linkedin.com/'
                },
                {
                    name: 'Instagram',
                    img: './imgs/instagram.svg',
                    url: 'https://www.instagram.com/'
                },
                {
                    name: 'Youtube',
                    img: './imgs/youtube.svg',
                    url: 'https://www.youtube.com/'
                },
                {
                    name: 'TikTok',
                    img: './imgs/tiktok.svg',
                    url: 'https://www.tiktok.com/'
                },
                {
                    name: 'Whatsapp',
                    img: './imgs/whatsapp.svg',
                    url: 'https://web.whatsapp.com/'
                },
                {
                    name: 'yahoo',
                    img: './imgs/Yahoo.svg',
                    url: 'https://www.yahoo.com/'
                },
                {
                    name: 'Tumblr',
                    img: './imgs/Tumblr.svg',
                    url: 'https://www.tumblr.com/'
                },
            ]
        }
    },

    template: `
        <div class="brand">
            <div class="brand-item" v-for="brand in brandData">
                <a :href="brand.url">
                    <img :src="brand.img" :alt="brand.name" width="100%">
                    <span>{{brand.name}}</span>
                </a>
            </div>
        </div>
    `
}

export const tabbar = {
    data() {
        return {
            tabs: [
                {
                    type: "Recommend",
                    typeId: undefined,
                },
                {
                    type: "Business",
                    typeId: 12,
                },
                {
                    type: "Tech",
                    typeId: 4,
                },
                {
                    type: "Finance",
                    typeId: 1,
                },
                {
                    type: "Fashion",
                    typeId: 2,
                },
                {
                    type: "Health",
                    typeId: 3,
                },
                {
                    type: "Car",
                    typeId: 7
                }
            ],
            currentTab: undefined
        }
    },
    methods: {
        handleChangeTab(tab) {
            this.currentTab = tab
            this.$emit('change', tab)
        }
    },

    template: `
    <div class="tab-wrapper">
        <div class="tab">
            <div class="tab-item" :class="{active: currentTab === tab.typeId}" v-for="tab in tabs" :key="tab.typeId" @click="handleChangeTab(tab.typeId)">
                <span class="tab-item_span">
                    {{tab.type}}
                </span>
            </div>
        </div>
    </div>
    `
}

export const newBox = {
    props: {
        news: {
            type: Object,
            default: () => ({})
        },
        boxType: {
            type: String,
            default: 'normal'
        }
    },
    data() {
        return {

        }
    },
    methods: {
        handleToDetail() {
            return `./detail.html?id=${this.news.id}&title=${encodeURIComponent(this.news.title)}`
        }
    },

    template: `
            <a class="news" v-if="boxType === 'normal'" :href="handleToDetail()">
                <div class="news-info">
                    <span class="news-info-title">{{news.title}}</span>
                    <span class="news-info-sub">{{news.information}}</span>
                    <span class="news-info-date">{{news.cdate}}</span>
                </div>
                <div class="news-poster">
                    <img :src="news.img" :alt="news.title">
                    <div class="news-tag">{{news.name}}</div>
                </div>
            </a>

            <a class="big" v-else-if="boxType === 'big'" :href="handleToDetail()">
                <div class="big-wrapper">
                    <img :src="news.img" :alt="news.title">
                    <div class="big-wrapper-tag">{{news.name}}</div>
                    <div class="big-wrapper-title">
                        <span class="big-wrapper-title_span">{{news.title}}</span>
                    </div>
                </div>
            </a>
    `
}

export const menu = {
    props: {
        page: {
            type: String,
            default: 'index'
        }
    },
    template: `
        <div class="menu">
            <a href="javascript:history.back()">
                <svg t="1725260128955" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6273" width="32" height="32"><path d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984c-18.752-18.72-18.752-49.12 0-67.872l351.968-352c18.752-18.752 49.12-18.752 67.872 0 18.752 18.72 18.752 49.12 0 67.872l-318.016 318.048 318.016 318.016c18.752 18.752 18.752 49.12 0 67.872C696.544 907.328 684.256 912 671.968 912z" p-id="6274" fill="#000000"></path></svg>
            </a>
            <a href="javascript:history.forward()">
                <svg t="1725260140239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6475" width="32" height="32"><path d="M761.056 532.128c0.512-0.992 1.344-1.824 1.792-2.848 8.8-18.304 5.92-40.704-9.664-55.424L399.936 139.744c-19.264-18.208-49.632-17.344-67.872 1.888-18.208 19.264-17.376 49.632 1.888 67.872l316.96 299.84-315.712 304.288c-19.072 18.4-19.648 48.768-1.248 67.872 9.408 9.792 21.984 14.688 34.56 14.688 12 0 24-4.48 33.312-13.44l350.048-337.376c0.672-0.672 0.928-1.6 1.6-2.304 0.512-0.48 1.056-0.832 1.568-1.344C757.76 538.88 759.2 535.392 761.056 532.128z" p-id="6476" fill="#000000"></path></svg>
            </a>
            <a href="index.html">
                <svg t="1725260163798" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6879" width="32" height="32"><path d="M96 480c-9.6 0-19.2-3.2-25.6-12.8-12.8-12.8-9.6-35.2 3.2-44.8l377.6-310.4c35.2-25.6 86.4-25.6 118.4 0l377.6 307.2c12.8 9.6 16 32 3.2 44.8-12.8 12.8-32 16-44.8 3.2L531.2 166.4c-9.6-6.4-28.8-6.4-38.4 0L115.2 473.6c-6.4 6.4-12.8 6.4-19.2 6.4zM816 928H608c-19.2 0-32-12.8-32-32v-150.4c0-22.4-38.4-44.8-67.2-44.8-28.8 0-64 19.2-64 44.8V896c0 19.2-12.8 32-32 32H211.2C163.2 928 128 892.8 128 848V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304c0 9.6 6.4 16 19.2 16H384v-118.4c0-64 67.2-108.8 128-108.8s131.2 44.8 131.2 108.8V864h176c9.6 0 16 0 16-19.2V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304C896 896 864 928 816 928z" :fill="page === 'index' ? '#4ba0ec' : '#000000'" p-id="6880"></path></svg>
            </a>
            <a href="hot.html">
                <svg t="1725260186160" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7081" width="32" height="32"><path d="M726.4 201.6c-12.8-9.6-28.8-6.4-38.4 0-9.6 9.6-16 25.6-9.6 38.4 6.4 12.8 9.6 28.8 12.8 44.8-86.4-201.6-230.4-246.4-236.8-249.6-9.6-3.2-22.4 0-28.8 6.4-9.6 6.4-12.8 19.2-9.6 28.8 12.8 86.4-25.6 188.8-115.2 310.4-6.4-25.6-16-51.2-32-80-9.6-9.6-22.4-16-35.2-12.8-16 3.2-25.6 12.8-25.6 28.8-3.2 48-25.6 92.8-51.2 140.8-22.4 41.6-44.8 86.4-54.4 134.4-32 153.6 35.2 265.6 224 368 6.4 3.2 9.6 3.2 16 3.2 9.6 0 19.2-6.4 25.6-12.8 9.6-16 6.4-35.2-9.6-44.8l-3.2-3.2c-188.8-105.6-214.4-192-192-297.6 9.6-41.6 28.8-76.8 48-118.4 12.8-19.2 22.4-38.4 28.8-57.6 0 9.6 3.2 22.4 3.2 32 0 12.8 9.6 25.6 22.4 28.8 12.8 3.2 25.6 0 35.2-9.6 112-134.4 172.8-256 179.2-364.8 51.2 32 137.6 108.8 182.4 272 3.2 9.6 9.6 19.2 22.4 22.4 9.6 3.2 22.4 0 28.8-6.4 25.6-22.4 38.4-54.4 41.6-86.4 54.4 67.2 115.2 176 108.8 288-6.4 92.8-57.6 172.8-150.4 243.2 35.2-166.4-32-358.4-179.2-457.6-9.6-6.4-22.4-6.4-32-3.2-9.6 6.4-16 16-16 28.8-3.2 89.6-48 144-89.6 198.4-35.2 44.8-70.4 89.6-76.8 150.4 0 16 12.8 32 28.8 35.2 19.2 3.2 32-12.8 35.2-28.8 3.2-41.6 32-76.8 60.8-115.2 35.2-44.8 76.8-99.2 96-176 115.2 108.8 153.6 300.8 83.2 435.2v3.2c0 3.2 0 3.2-3.2 6.4v12.8c0 3.2 0 3.2 3.2 6.4v3.2l3.2 3.2c0 3.2 3.2 3.2 3.2 6.4 0 0 3.2 3.2 6.4 3.2l3.2 3.2s3.2 0 3.2 3.2h19.2c3.2 0 6.4 0 9.6-3.2 163.2-89.6 252.8-208 259.2-345.6 9.6-214.4-169.6-393.6-204.8-416z" :fill="page === 'hot' ? '#4ba0ec' : '#000000'" p-id="7082"></path></svg>
            </a>
            <a href="about.html">
                <svg t="1725260198060" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7283" width="32" height="32"><path d="M800 384c0-160-128-288-288-288s-288 128-288 288c0 108.8 57.6 201.6 147.2 249.6-121.6 48-214.4 153.6-240 288-3.2 16 6.4 35.2 25.6 38.4h6.4c16 0 28.8-9.6 32-25.6 28.8-150.4 160-259.2 313.6-262.4h6.4c156.8 0 284.8-128 284.8-288zM288 384c0-124.8 99.2-224 224-224s224 99.2 224 224c0 121.6-99.2 220.8-220.8 224H505.6C384 604.8 288 505.6 288 384zM723.2 675.2c-16-9.6-35.2-6.4-44.8 9.6-9.6 16-6.4 35.2 9.6 44.8 73.6 51.2 124.8 121.6 140.8 204.8 3.2 16 16 25.6 32 25.6h6.4c16-3.2 28.8-19.2 25.6-38.4-19.2-99.2-80-185.6-169.6-246.4z" :fill="page === 'about' ? '#4ba0ec' : '#000000'" p-id="7284"></path></svg>
            </a>
        </div>
    `
}

export const search = {
    data() {
        return {
            keyword: ''
        }
    },
    methods: {
        handleToSearch() {
            window.location.href = `./search.html?keyword=${this.keyword}`
        }
    },
    template: `
    <div class="selfsearch">
                <div class="selfsearch-wrapper">
                    <div class="selfsearch-wrapper-input">
                        <input type="text" v-model="keyword" placeholder="Search the web..." @keydown.enter="handleToSearch">
                    </div>
                    <div class="selfsearch-wrapper-btn" @click="handleToSearch">
                        <svg t="1725270531823" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4002" width="32" height="32"><path d="M213.1976 515.482c0-33.485 5.632-65.588 15.616-95.693L53.4536 287.155A511.053 511.053 0 0 0 0.0016 515.482c0 82.048 19.2 159.436 53.35 228.147L228.6606 610.765c-10.24-30.72-15.437-62.9-15.463-95.283" fill="#FBBC05" p-id="4003"></path><path d="M521.2426 210.944a303.36 303.36 0 0 1 191.872 67.891l151.629-149.913C772.3536 49.306 653.9006 0.077 521.2436 0.077c-205.978 0-383.028 116.659-467.79 287.078L228.9416 419.79c40.397-121.498 155.597-208.87 292.352-208.87" fill="#EA4335" p-id="4004"></path><path d="M523.4706 813.235c-137.473 0-253.236-86.81-293.889-207.565L53.3256 737.51c85.172 169.37 263.092 285.261 470.144 285.261 127.719 0 249.677-44.39 341.248-127.641L697.3706 768.46c-47.18 29.108-106.65 44.8-173.952 44.8" fill="#34A853" p-id="4005"></path><path d="M1023.4376 510.618c0-30.26-4.787-62.874-11.904-93.133H523.4186v197.888h280.935c-14.004 67.481-52.224 119.347-106.957 153.088L864.7176 895.13c96.18-87.373 158.72-217.55 158.72-384.512" fill="#4285F4" p-id="4006"></path></svg>
                    </div>
                </div>
            </div>
    `
}